<template>
  <div class="waybill-quotation-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <a-tabs v-model:activeKey="activeKey" @change="changeTabHandle">
        <a-tab-pane key="1" :tab="`不可报价(${pageStat['1']})`"></a-tab-pane>
        <a-tab-pane key="2" :tab="`待报价(${pageStat['2']})`"></a-tab-pane>
        <a-tab-pane key="3" :tab="`待审核(${pageStat['3']})`"></a-tab-pane>
        <a-tab-pane key="4" :tab="`审批驳回(${pageStat['4']})`"></a-tab-pane>
        <a-tab-pane key="5" :tab="`审批通过(${pageStat['5']})`"></a-tab-pane>
      </a-tabs>
      <super-table
        :height="tableHeight"
        ref="tableRef"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :activeKey="activeKey"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
      >
        <template #tool>
          <div style="display: flex; justify-content: space-between">
            <div>
              <a-button v-debounce type="primary" @click="batchExportHandle">批量导出</a-button>
              <a-button type="primary" @click="modifyInnerRemarkHandle">修改内部备注</a-button>
              <a-button type="primary" @click="modifyRemarkHandle">修改客户备注</a-button>
            </div>

            <!-- 合并报关 -->
            <div v-if="!['1', '5'].includes(activeKey)">
              <a-dropdown :getPopupContainer="getPopupContainer">
                <a-button type="primary" class="ant-dropdown-link" @click.prevent> 批量操作 <DownOutlined /></a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="customsClearanceHandle" v-if="['2', '4'].includes(activeKey)">合并报关</a-menu-item>
                    <a-menu-item @click="cancelMergeDeclarationHandle" v-if="['2', '3', '4'].includes(activeKey)">取消报关</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
          </div>
        </template>
        <template #waybillNum="{ row }">
          <a-button type="link" @click="showHandle(row)">{{ row.waybillNum }}</a-button>
        </template>
        <template #addressType="{ row }">
          <a-tag v-if="row.addressType === 'AMAZON'" color="#108ee9">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
          <a-tag v-if="row.addressType === 'WALMART'" color="#2db7f5">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
          <a-tag v-if="row.addressType === 'PERSONALWAR'" color="#f50">{{ getLabelByDict("WAYBILL_TYPE", row.addressType) }}</a-tag>
        </template>

        <template #billingMethod="{ row }">
          <span v-if="row.billingMethod === 1">单票计费</span>
          <a-button type="link" @click="MergeDeclarationDetailHandle(row)" v-if="row.billingMethod === 2">合并计费</a-button>
        </template>
        <template #action="{ row }">
          <a-button v-if="activeKey === '1'" type="link" @click="showHandle(row)">运单详情</a-button>
          <a-button v-if="activeKey === '2'" type="link" @click="offerHandle(row)">报价</a-button>
          <template v-if="activeKey === '3'">
            <a-button type="link" @click="offerDetailsHandle(row)">报价详情</a-button>
            <a-button type="link" danger @click="revocationQuotationHandle(row)">撤回报价</a-button>
            <a-button type="link" @click="showLogHandle(row)">日志</a-button>
          </template>
          <template v-if="activeKey === '4'">
            <a-button type="link" @click="offerHandle(row)">报价</a-button>
            <a-button type="link" @click="showLogHandle(row)">日志</a-button>
          </template>
          <template v-if="['5'].includes(activeKey)">
            <a-button type="link" @click="offerDetailsHandle(row)">报价详情</a-button>
            <a-button type="link" @click="showLogHandle(row)">日志</a-button>
          </template>
        </template>
      </super-table>
    </div>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :closable="true" @close="drawerOpts.visible = false" :width="drawerOpts.width" placement="right">
      <component
        v-model:visible="drawerOpts.visible"
        :requestFn="getLogFn"
        :is="drawerOpts.component"
        :type="drawerOpts.type"
        :pass-data="drawerOpts.passData"
        @submit="drawerOpts.visible = false"
      ></component>
    </a-drawer>
    <!-- 弹窗 -->
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component
        v-model:visible="dialogOpts.visible"
        :is="dialogOpts.component"
        :type="dialogOpts.type"
        :pass-data="dialogOpts.passData"
        @submit="dialogSubmitHandle"
        :activeKey="activeKey"
      ></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import Offer from "./components/offer/index.vue";
import Details from "./components/details/index.vue";
import OfferDetails from "./components/offerDetails/index.vue";
import OperationLog from "@/components/operationLog/index.vue";
import BatchModifyRemark from "./components/batchModifyRemark/index.vue";
import CustomsClearance from "./components/customsClearance/index.vue";
import { useRoute } from "vue-router";
import { onActivated, onMounted } from "vue";
export default {
  name: "WaybillQuotation",
  components: {
    Offer,
    Details,
    OfferDetails,
    OperationLog,
    BatchModifyRemark,
    CustomsClearance
  }
};
</script>
<script lang="ts" setup>
import TableHeightHook from "@/hook/tableHeightHook";
import ModalHook from "@/hook/modalHook";
import CommonHook from "@/hook/commonHook";
import { searchItemList } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { DownOutlined } from "@ant-design/icons-vue";
const { tableHeight, loading } = TableHeightHook(110);
const route = useRoute();
const { getLabelByDict } = CommonHook();
const { searchForm, tableData, tableRef, dialogOpts, drawerOpts, activeKey, pageStat, tableColumn, getPopupContainer } = InitHook();
const {
  searchHandle,
  getData,
  offerHandle,
  showHandle,
  // modifyChannelHandle,
  // modifyMasterialHandle,
  changeTabHandle,
  offerDetailsHandle,
  revocationQuotationHandle,
  showLogHandle,
  getLogFn,
  modifyRemarkHandle,
  modifyInnerRemarkHandle,
  batchExportHandle,
  customsClearanceHandle,
  cancelMergeDeclarationHandle,
  MergeDeclarationDetailHandle
} = OperationHook({
  searchForm,
  tableData,
  tableRef,
  dialogOpts,
  drawerOpts,
  loading,
  activeKey,
  pageStat
});
searchHandle();
const { dialogSubmitHandle } = ModalHook({
  drawerOpts,
  dialogOpts,
  callBack: () => searchHandle()
});

onMounted(() => {
  const { waybillNums = undefined, status } = history.state;
  searchForm.waybillNums = waybillNums;
  activeKey.value = status || "1";
  searchHandle();
});

onActivated(() => {
  const { waybillNums = undefined, status } = history.state;
  searchForm.waybillNums = waybillNums;
  activeKey.value = status || "1";
  searchHandle();
});
</script>
<style lang="stylus" scoped></style>
